<template>
    <div class="search-bar">
        <van-search v-model="searchText" placeholder="搜索医院、科室或医生" shape="round" background="#fff" @search="onSearch">
            <template #right-icon>
                <van-icon name="bell" size="20" class="notice-icon" @click="onNoticeClick" />
            </template>
        </van-search>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const searchText = ref('')

const onSearch = () => {
    if (searchText.value) {
        router.push({
            path: '/search',
            query: { keyword: searchText.value }
        })
    }
}

const onNoticeClick = () => {
    router.push('/notifications')
}
</script>

<style scoped lang="scss">
.search-bar {
    padding: 8px 0;
    background: #fff;

    :deep(.van-search) {
        padding: 0 12px;
    }

    :deep(.van-search__content) {
        background: #f5f5f5;
    }

    .notice-icon {
        margin-left: 8px;
        color: #666;
    }
}
</style>